import React from "react"
import { Navigator, View } from "@tarojs/components"
import clsx from "clsx"
import { commonUrls } from "@/utils/router"
import styles from "./index.module.scss"

type IProps = {
  className?: string
}
/** 快捷导航 */
const GpJumpNavs: React.FC<IProps> = (props: IProps) => {
  const { className } = props
  return (
    <View className={clsx("px-30px pt-32px pb-48px w-full box-border bg-hex-fff", className)}>
      <View className="yahei-bold font-bold text-36px text-hex-333 pb-34px ">快捷导航</View>
      <View className="grid grid-cols-4 gap-20px">
        <Navigator
          hoverClass="none"
          url={commonUrls.shoolQuery}
          className={clsx("yahei", styles["nav-item"])}
        >
          院校查询
        </Navigator>
        <Navigator
          hoverClass="none"
          url={commonUrls.professional}
          className={clsx("yahei", styles["nav-item"])}
        >
          专业大全
        </Navigator>
        <Navigator
          hoverClass="none"
          url={commonUrls.institution}
          className={clsx("yahei", styles["nav-item"])}
          openType="switchTab"
        >
          培训机构
        </Navigator>
        <Navigator
          hoverClass="none"
          url={commonUrls.proExplain}
          className={clsx("yahei", styles["nav-item"])}
        >
          专业解读
        </Navigator>
        <Navigator
          hoverClass="none"
          url={commonUrls.introBadge}
          className={clsx("yahei", styles["nav-item"])}
        >
          招生简章
        </Navigator>
        <Navigator
          hoverClass="none"
          url={commonUrls.column}
          className={clsx("yahei", styles["nav-item"])}
        >
          艺考专题
        </Navigator>
        <Navigator
          hoverClass="none"
          url={commonUrls.institutionRanking}
          className={clsx("yahei", styles["nav-item"])}
        >
          机构排名
        </Navigator>
        <Navigator
          hoverClass="none"
          url={commonUrls.news}
          className={clsx("yahei", styles["nav-item"])}
        >
          艺考资讯
        </Navigator>
        {/* <Navigator
          hoverClass="none"
          url={makePagePath(pageMapper.contentColumn, { id: 1 })}
          className={clsx("yahei", styles["nav-item"])}
        >
          内容专题
        </Navigator> */}
      </View>
    </View>
  )
}
export default GpJumpNavs
